<template>
    <view class="gjl-view">
        <view class="main">
            <view class="main-center">
                <view class="title">
                    <view class="left">
                        成交时间（天）
                    </view>
                    <view class="right">
                        佣金率
                    </view>
                </view>
                <view class="content">
                    <view class="content-ul">
                        <view class="content-li" v-for="(item,index) in config" :key="index">
                            <view class="left">
                                {{item.shareConfMinDay}}-{{item.shareConfMaxDay}}
                            </view>
                            <view class="right">
                                {{item.shareConfProportion}}%
                            </view>
                        </view>
                    </view>
                </view>
                <view class="bottom">
                    提示：佣金分成有效期仅限365天。过期后不再计算佣金分成
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getConfInfo } from '@/util/commonFn'
    export default {
        data(){
            return {
                config: {}
            }
        },
        mounted() {
            this.getConfig()
        },
        methods:{
            // 获取配置
            getConfig(){
                getConfInfo().then((res)=>{
                    this.config = res.ShareConf
                    console.log(this.config)
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        background: rgba(249, 249, 249, 1);
        min-height: 100%;
        overflow: hidden;

        .main {
            margin: 25rpx 30rpx 0;
            background: rgba(255, 255, 255, 1);
            border-radius: 10rpx;

            .main-center {
                padding: 29rpx 0 65rpx;

                .title {
                    text-align: center;
                    border-bottom: 1px solid rgba(229, 229, 229, 1);
                    padding-bottom: 42rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    font-size: 28rpx;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);

                    .left {
                        flex: 1 1 50%;
                    }

                    .right {
                        flex: 1 1 50%;
                    }
                }

                .content {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);

                    .content-ul {
                        .content-li {
                            text-align: center;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            padding: 41rpx 0 35rpx;
                            border-bottom: 1px solid rgba(229, 229, 229, 1);

                            .left {
                                flex: 1 1 50%;
                            }

                            .right {
                                flex: 1 1 50%;
                            }
                        }
                    }
                }

                .bottom {
                    text-align: center;
                    margin-top: 41rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                }
            }
        }
    }
</style>
